<template>
  <basic-container>
    <div style="width: 100%">
      <div style="display: flex; justify-content: space-between">
        <h2>出维修确认</h2>
        <el-col :span="4" style="padding-left: 20px">
          <div class="statistics">
            <div>
              <span>维修直通率</span><span class="rateValue">{{ repairStraightThroughRate }}</span>
            </div>
            <div>
              <span>返回重修率</span><span class="rateValueis">{{ returnsWorkRate }}</span>
            </div>
          </div>
        </el-col>
      </div>
      <div style="width: 80%; margin-right: 30px">
        <div class="bindLeft">
          <avue-form class="search-form" ref="badCodeModel" v-model="badCodeModel" :option="badCodeOption">
            <template slot="qualifiedRouteId">
              <el-select v-model="badCodeModel.qualifiedRouteId" placeholder="工序" @change="changeFromRouteId">
                <el-option v-for="item in fromRouteOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </template>
            <template slot="imageList">
              <div class="img-list">
                <div style="margin: 5px 10px; display: flex; flex-direction: column" v-for="(item, index) in badCodeModel.imageList" :key="index">
                  <img style="width: 100px; height: 100px" :src="item.link ? item.link : ''" @click="openPreview('0', item.link)" />
                  <button type="button" :class="`el-button el-button--text el-button--small downLoadFile${index}`" @click="handleDownload(item.link)">
                    <i class="el-icon-download"></i><span>下载</span>
                  </button>
                </div>
              </div>
            </template>
          </avue-form>
          <el-col :span="15" class="btn-group" style="display: flex; justify-content: center">
            <el-button type="primary" size="small" @click="repairOutData('out')">出维修</el-button>
            <el-button type="primary" size="small" @click="handlePrintTest">返回重修</el-button>
            <el-button type="primary" size="small" @click="emptytSearch">清空</el-button>
          </el-col>
        </div>
      </div>
      <!-- </el-col>
        <el-col :span="19"> -->
    </div>

    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"></common-modal-template>
  </basic-container>
</template>

<script>
import { submit, add, getSnProductInfo, getFailureCodeByIdList, checkCode, productRoute } from '@/api/repair/failurerecord';
import { getProcessRoute, getProcessRouteByNo } from '@/api/product/station-manage';
import GlobalModalTemplate from '@/components/common-modal-template/global-modal-template.vue';
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
import { getList, repairOut, scrap, calculateRate, getPageList } from '@/api/repair/repairoutRefactor.js';
import { getRoutesByWo } from '@/api/product/part-lock';
import { mapGetters } from 'vuex';
import userTableConfig from '@/components/user-table-config';
import userConfig from '@/mixins/userConfig';
export default {
  components: {
    GlobalModalTemplate,
    CommonModalTemplate,
    userTableConfig
  },
  mixins: [userConfig()],
  data() {
    return {
      pageCode: 'FAILURE_RECORD',
      badCodeModel: {},
      fromRouteOptions: [], // 工序
      badCodeOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 200,
        labelPosition: 'right',
        column: [
          {
            label: '产品序列号',
            prop: 'productSequenceNumber',
            span: 12,
            rules: [
              {
                required: true,
                message: '请输入产品序列号',
                trigger: 'blur'
              }
            ],
            enter: (value) => {
              this.findWorkOrderNoByNo(value);
            }
            // appendClick: () => {
            //   this.openUserCommonModal({
            //     type: 'workOrder'
            //   });
            // }
          },
          {
            label: '维修位号',
            prop: 'partNo',
            disabled: true,
            span: 12
          },
          {
            label: '工单号',
            prop: 'partNo',
            disabled: true,
            span: 12
          },
          {
            label: '维修备注',
            prop: 'repairRemark',
            span: 12,
            // type: 'textarea',
            // maxRows: 3,
            // minRows: 3,
            disabled: true
          },
          {
            label: '产品编码',
            prop: 'partNo',
            disabled: true,
            span: 12
          },
          {
            label: '不良现象',
            prop: 'failureName',
            span: 12,
            disabled: true
          },
          {
            label: '产品名称',
            prop: 'partName',
            disabled: true,
            span: 12
          },
          {
            label: '不良现象描述',
            prop: 'failureRemark',
            span: 12,
            disabled: true
          },
          {
            label: '产品型号',
            prop: 'partModel',
            disabled: true,
            span: 12
          },
          {
            label: '不良原因大类',
            prop: 'mainCauseName',
            span: 12,
            disabled: true
          },
          {
            label: '不良原因小类',
            prop: 'subCauseName',
            span: 12,
            disabled: true
          },
          {
            label: '维修图片查看',
            span: 12,
            prop: 'imageList'
          },
          {
            label: '维修后去向',
            type: 'select',
            prop: 'qualifiedRouteId',
            dicData: [],
            span: 24,
            placeholder: '请选择 维修后去向',
            span: 12,
            rules: [
              {
                required: true,
                message: '请选择维修后去向',
                trigger: 'blur'
              }
            ]
          }
        ]
      },
      form: {},
      query: {},
      loading: false,
      selectionList: [],
      // rules: {
      //   productSequenceNumber: [{ required: true, message: '请输入产品序列号', trigger: 'blur' }],
      //   failureCode: [{ required: true, message: '请输入不良代码', trigger: 'blur' }]
      // },
      data: [],
      visibile: false,
      modalName: '', //打开公用模态框名称
      tableOption: {}, //公用模态框配置信息
      timer: new Date().getTime(), //不同内容使用同一个模态框结构，key值不同需要重新请求渲染数据，否则会请求到上一个使用的数据内容
      repairStraightThroughRate: '', //维修直通率
      returnsWorkRate: '', //返回重修率
      scrapeRate: '' //报废率
    };
  },
  mounted() {
    this.getCalculateRate();
  },
  computed: {
    ...mapGetters(['permission'])
  },
  methods: {
    // 根据工单编号获取工序
    findWorkOrderNoByNo(productSequenceNumber) {
      let prm = {
        statusStr: '3,8',
        queryType: 'REPAIR_OUT',
        productSequenceNumber: productSequenceNumber
      };
      getPageList('1', '15', prm).then((res) => {
        const resObj = res.data.data;
        let data = resObj.records || [];
        this.badCodeModel = data[0];
        this.findWorkOrderNo(data[0].workOrderId);
      });
    },
    // 根据工单id获取工序
    findWorkOrderNo(workorderId) {
      console.log(1111);
      getRoutesByWo(workorderId).then(
        (res) => {
          let data = this._get(res, 'data.data', []);
          this.fromRouteOptions = data.map((item) => {
            return {
              code: item.code,
              id: item.id,
              name: item.name
            };
          });
        },
        (error) => {
          column.dicData = [];
          this.badCodeModel.qualifiedRouteId = '';
        }
      );
    },
    // 出维修操作
    repairOutData(type) {
      let params = '';
      let ids = [this.badCodeModel.id];
      if (type === 'out') {
        if (!this.badCodeModel.qualifiedRouteId) {
          this.$message({
            type: 'warning',
            message: '请选择工序！'
          });
          return;
        }
        params = `result=0&qualifiedRouteId=${this.badCodeModel.qualifiedRouteId}`;
      } else {
        params = 'result=1';
      }
      repairOut(params, ids).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.msg
          });
          this.$refs.badCodeModel.resetFields();
          this.getCalculateRate();
        }
      });
    },
    handlePrintTest() {
      this.$confirm('是否确认将所有序列号返回重修?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return this.repairOutData();
      });
    },
    emptytSearch() {
      console.log(111);
      this.$refs.badCodeModel.resetFields();
    },
    openPreview(index = 0, link) {
      this.$ImagePreview([{ url: link }], index, {
        closeOnClickModal: false
      });
    },
    getCalculateRate() {
      calculateRate().then((res) => {
        this.repairStraightThroughRate = this._get(res, 'data.data.repairStraightThroughRate', '');
        this.returnsWorkRate = this._get(res, 'data.data.returnsWorkRate', '');
        this.scrapeRate = this._get(res, 'data.data.scrapeRate', '');
      });
    },
    // 重新加载公用表格弹窗组件
    newKey() {
      this.timer = new Date().getTime();
    }
  }
};
</script>

<style scoped>
::v-deep .avue-form__menu {
  /* display: none; */
}
::v-deep .search-form .entry-btn-wrapper {
  /* width: 100%;
  .entry-btn {
    float: right;
  } */
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
::v-deep .avue-crud .avue-crud__menu {
  display: none !important;
}
.rateValue {
  font-size: 30px;
  color: #70b603;
}
.rateValueis {
  font-size: 30px;
  color: #ff4040;
}
</style>
